<template>
  <!-- 停车费缴费弹窗 -->
  <view v-if="showPaymentModal" class="modal-overlay" @click="closePaymentModal">
    <view class="payment-modal" @click.stop>
      <view class="modal-header">
        <text class="modal-title">待缴停车费</text>
        <uni-icons class="close-icon" type="closeempty" size="20" @click="closePaymentModal"></uni-icons>
        <view class="fee-display">
          <text class="fee-symbol">¥</text>
          <text class="fee-amount">{{ parkingInfo.fee }}</text>
        </view>

      </view>

      <view class="payment-content">
        <view class="payment-details">
          <view class="detail-row">
            <text class="detail-label">{{ currentPlate }}</text>
            <view class="payment-tag">
              <text class="tag-text">待缴费</text>
            </view>
          </view>

          <view class="detail-row">
            <text class="detail-label">{{ parkingInfo.locationName }}</text>
          </view>

          <view class="detail-row">
            <text class="detail-label">进场时间</text>
            <text class="detail-value">{{ paymentDetails.entryTime }}</text>
          </view>

          <view class="detail-row">
            <text class="detail-label">出场时间</text>
            <text class="detail-value">{{ paymentDetails.exitTime }}</text>
          </view>

          <view class="detail-row">
            <text class="detail-label">停车时长</text>
            <text class="detail-value">{{ parkingInfo.duration }}</text>
          </view>

          <view class="detail-row">
            <text class="detail-label">剩余出场时间</text>
            <text class="detail-value">{{ paymentDetails.remainingTime }}</text>
          </view>

          <view class="detail-row">
            <text class="detail-label">优惠券</text>
            <text class="detail-value">{{ paymentDetails.coupon }}</text>
          </view>
        </view>
      </view>
      <view class="payment-footer">
        <view class="payment-actions">
          <button class="pay-button" @click="confirmPayment">立即支付</button>
          <button class="contact-button" @click="contactService">联系客服</button>
        </view>
      </view>
    </view>
  </view>

  <!-- 充电详情弹窗 -->
  <view v-if="showChargingModal" class="modal-overlay" @click="closeChargingModal">
    <view class="charging-modal" @click.stop>
      <view class="modal-header">
        <text class="modal-title">充电详情</text>
        <uni-icons class="close-icon" type="closeempty" size="20" @click="closeChargingModal"></uni-icons>
        <!-- 费用显示 -->
        <view class="fee-display">
          <text class="fee-symbol">¥</text>
          <text class="fee-amount">{{ chargingDetails.totalCost }}</text>
        </view>

      </view>

      <view class="charging-content">


        <!-- 车牌和充电桩信息 -->
        <view class="charging-info-section">
          <view class="plate-display">{{ currentPlate }}</view>
          <view class="station-info">
            <text>{{ chargingDetails.stationName }}</text>
          </view>
          <view class="pile-info">
            <text>充电桩编号：{{ chargingDetails.pileNumber }}</text>
          </view>
        </view>

        <!-- 时间信息 -->
        <view class="time-info">
          <view class="time-row">
            <text class="time-date">{{ chargingDetails.startDate }}</text>
            <text class="time-duration">{{ chargingDetails.duration }}</text>
            <text class="time-date">{{ chargingDetails.endDate }}</text>
          </view>
          <view class="time-labels">
            <view class="time-item">
              <text class="time-badge">起</text>
              <text class="time-value">{{ chargingDetails.startTime }}</text>
            </view>
            <view class="time-item">
              <text class="time-badge">止</text>
              <text class="time-value">{{ chargingDetails.endTime }}</text>
            </view>
          </view>
        </view>

        <!-- 充电信息 -->
        <view class="info-sections">
          <view class="info-section">
            <text class="section-title">充电信息</text>
            <view class="info-row">
              <text class="info-label">已充电量</text>
              <text class="info-value">{{ chargingDetails.chargedAmount }}度</text>
            </view>
            <view class="info-row" v-if="isChargingComplete">
              <text class="info-label">剩余未充电量</text>
              <text class="info-value">{{ chargingDetails.remainingAmount }}度</text>
            </view>
            <view class="info-row" v-if="isChargingComplete">
              <text class="info-label">预计剩余时间</text>
              <text class="info-value">{{ chargingDetails.estimatedTime }}</text>
            </view>
          </view>

          <!-- 用电信息 -->
          <view class="info-section">
            <text class="section-title">用电信息</text>
            <view class="info-row">
              <text class="info-label">快慢充</text>
              <text class="info-value">{{ chargingDetails.chargingType }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">充电电流</text>
              <text class="info-value">{{ chargingDetails.current }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">充电功率</text>
              <text class="info-value">{{ chargingDetails.power }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">充电电压</text>
              <text class="info-value">{{ chargingDetails.voltage }}</text>
            </view>
          </view>

          <!-- 费用信息 -->
          <view class="info-section">
            <text class="section-title">费用信息</text>
            <view class="info-row">
              <text class="info-label">已充电费</text>
              <text class="info-value">¥{{ chargingDetails.chargingFee }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">充电服务费</text>
              <text class="info-value">¥{{ chargingDetails.serviceFee }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">占位费</text>
              <text class="info-value">¥{{ chargingDetails.occupancyFee }}</text>
            </view>
            <view class="info-row">
              <text class="info-label">优惠券</text>
              <text class="info-value">{{ chargingDetails.coupon }}</text>
            </view>
          </view>
        </view>


        <!-- 操作按钮移动到底部固定栏 -->
      </view>

      <view class="charging-footer">
        <!-- 费用汇总 -->
        <view class="cost-summary">
          <text class="summary-text">已产生费用¥{{ chargingDetails.totalCost }}，剩余费用原路返回</text>
        </view>
        <text class="complete-button" v-if="!isChargingComplete" @click="completeCharging">充电已完成</text>
        <text class="complete-button" v-if="isChargingComplete" @click="completeCharging">结束充电</text>
      </view>
    </view>
  </view>
</template>
<script setup>
// 作为可复用弹窗组件，使用 props 接收数据与显示状态，通过 emits 与父组件交互
const props = defineProps({
  showPaymentModal: {type: Boolean, default: false},
  showChargingModal: {type: Boolean, default: false},
  isChargingComplete: {type: Boolean, default: false},
  currentPlate: {type: String, default: ''},
  parkingInfo: {type: Object, default: () => ({locationName: '', duration: '', fee: ''})},
  paymentDetails: {type: Object, default: () => ({entryTime: '', exitTime: '', remainingTime: '', coupon: ''})},
  chargingDetails: {
    type: Object, default: () => ({
      totalCost: '', stationName: '', pileNumber: '', startDate: '', endDate: '', duration: '',
      startTime: '', endTime: '', chargedAmount: '', remainingAmount: '', estimatedTime: '', chargingType: '',
      current: '', power: '', voltage: '', chargingFee: '', serviceFee: '', occupancyFee: '', coupon: ''
    })
  }
})

const emit = defineEmits([
  'closePaymentModal',
  'confirmPayment',
  'contactService',
  'closeChargingModal',
  'completeCharging'
])

// 事件方法：模板中直接复用原有方法名，内部转发为组件事件
const closePaymentModal = () => emit('closePaymentModal')
const confirmPayment = () => emit('confirmPayment')
const contactService = () => emit('contactService')
const closeChargingModal = () => emit('closeChargingModal')
const completeCharging = () => emit('completeCharging')
</script>
<style>
/* 充电详情弹窗样式 */
.charging-modal {
  width: 100%;
  /* max-width: 400px; */
  height: 1400 rpx;
  background-color: #FFFFFF;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

.charging-content {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.charging-footer {
  padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid #F0F0F0;
  background-color: #FFFFFF;

  display: flex;
  flex-direction: column;
  /* gap: 12px; */
  text-align: center;
}

.charging-info-section {
  margin-bottom: 20px;
}

.time-info {
  margin-bottom: 20px;
  background-color: #F7F8FB;
  border-radius: 12px;
  padding: 16px;
}

.time-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.time-date {
  font-size: 14px;
  color: #666666;
}

.time-duration {
  font-size: 14px;
  color: #666666;
}

.time-labels {
  display: flex;
  justify-content: space-between;
}

.time-item {
  display: flex;
  align-items: center;
}

.time-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44 rpx;
  height: 44 rpx;
  border-radius: 22 rpx;
  background-color: #ECEEF3;
  color: #555;
  font-size: 12px;
  margin-right: 6px;
}

.time-value {
  font-size: 16px;
  color: #111111;
  font-weight: 600;
}

.info-sections {
  margin-bottom: 20px;
}

.info-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  margin-bottom: 12px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
}

.info-label {
  font-size: 14px;
  color: #666666;
}

.info-value {
  font-size: 14px;
  color: #333333;
  font-weight: 500;
}

.cost-summary {
  text-align: center;
  margin-bottom: 20px;
}

.summary-text {
  font-size: 14px;
  color: #666666;
}

.charging-actions {
  display: flex;
  justify-content: center;
}

.complete-button {
  background: linear-gradient(135deg, #00D4AA 0%, #00B894 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 25px;
  /* padding: 16px; */
  font-size: 16px;
  font-weight: 600;
  width: 660 rpx;
  height: 95 rpx;
  line-height: 95 rpx;
}

.station-info {
  font-size: 14px;
  color: #333333;
  margin-bottom: 4px;
}

.pile-info {
  font-size: 12px;
  color: #666666;
}

.modal-header {
  position: relative;
  display: block; /* 覆盖全局 flex 布局 */
  padding: 16px 20px;
  height: 200 rpx;
  background-image: url('static/images/bg_car5.png');
  background-size: cover;
  background-position: right bottom;
  background-repeat: no-repeat;
}

.modal-title {
  position: absolute;
  left: 20px;
  top: 14px;
  z-index: 2;
}

.close-icon {
  position: absolute;
  right: 20px;
  top: 14px;
  z-index: 2;
  color: #fff;
}

.fee-display {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  margin: 0; /* 覆盖全局 margin-bottom */
}

.fee-symbol {
  font-size: 28px;
  color: #000;
  font-weight: 600;
}

.fee-amount {
  font-size: 44px;
  color: #000;
  font-weight: 700;
  margin-left: 6px;
}

/* ====== 补充通用遮罩与缴费弹窗样式 ====== */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
}

.payment-modal {
  width: 100%;
  max-width: 400px;
  height: 1390 rpx;
  background-color: #FFFFFF;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  animation: slideUp 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

.payment-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.payment-footer {
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background-color: #fff;
  box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.06);
}

.payment-details {
  margin-bottom: 30px;
}

.detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #F5F5F5;
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-label {
  font-size: 14px;
  color: #666666;
  flex: 1;
}

.detail-value {
  font-size: 14px;
  color: #333333;
  text-align: right;
}

.payment-tag {
  background-color: #E8F5E8;
  border-radius: 12px;
  padding: 4px 12px;
}

.tag-text {
  font-size: 12px;
  color: #4CAF50;
}

.payment-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.pay-button {
  background: linear-gradient(135deg, #00D4AA 0%, #00B894 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  width: 660 rpx;
  height: 95 rpx;
  line-height: 95 rpx;
}

.contact-button {
  background-color: #F5F5F5;
  color: #666666;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 500;
  width: 660 rpx;
  height: 95 rpx;
  line-height: 95 rpx;
}
</style>
